<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <head-tool>
        <div slot="qian" v-if="$slots.qian"></div>
        <div class="btus" slot="hou">
          <el-button type="primary">导入</el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showDialog = true"
            >新增员工</el-button
          >
        </div>
      </head-tool>
      <el-card>
        <el-table :data="tableData">
          <el-table-column
            label="序号"
            type="index"
            width="69px"
          ></el-table-column>
          <el-table-column
            label="姓名"
            prop="username"
            width="89px"
          ></el-table-column>
          <el-table-column prop="staffPhoto" label="头像" width="120px">
            <template slot-scope="{ row }">
              <img
                style="width:60px;"
                v-imgerror="defaultImg"
                :src="row.staffPhoto"
                alt=""
                @click="showQrCode(row.staffPhoto)"
              />
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile"></el-table-column>
          <el-table-column label="工号" prop="workNumber"></el-table-column>
          <el-table-column label="聘用形势" prop="formOfEmployment">
            <template slot-scope="{ row }">
              {{ row.formOfEmployment | formatHireType }}
            </template></el-table-column
          >
          <el-table-column label="部门" prop="departmentName">
          </el-table-column>
          <el-table-column label="入职时间" prop="timeOfEntry">
            <!-- <template slot-scope="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template> -->
          </el-table-column>
          <el-table-column
            label="是否在职"
            prop="correctionTime"
          ></el-table-column>
          <el-table-column label="状态" prop="enableState">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.enableState"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="230px">
            <div
              slot-scope="{ row }"
              style="display:flex;justify-content:space-between;"
            >
              <el-link
                type="primary"
                @click="
                  $router.push({
                    path: '/yuangong/detail',
                    query: { id: row.id }
                  })
                "
                >查看</el-link
              >
              <el-link type="primary">转正</el-link>
              <el-link type="primary">调岗</el-link>
              <el-link type="primary">离职</el-link>
              <el-link type="primary">角色</el-link>
              <el-link type="primary" @click="delEmp(row.id)">删除</el-link>
            </div>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="pageChange"
          style="text-align: center; margin-top: 20px"
          :current-page="pageInfo.page"
          :page-size="pageInfo.size"
          layout="total, prev, pager, next"
          :total="pageInfo.total"
        />
      </el-card>
      <add-emp :showDialog.sync="showDialog" />
      <!-- 二维码 -->
      <el-dialog :visible.sync="showCodeDialog" title="二维码">
        <el-row type="flex" justify="center">
          <!-- 显示二维码 canvas  -->
          <canvas ref="canvas"></canvas>
        </el-row>
      </el-dialog>
      <!-- 角色对话框 -->
      <role-setting :showDialog.sync="showRole" />
    </div>
  </div>
</template>

<script>
import constant from '@/api/constant/employees'
import { getEmpList, delEmp } from '@/api/yuangong'
import addEmp from './components/add-emp.vue'
//导入生成二维码插件
import qrCode from 'qrcode'
//导入角色对话框
import roleSetting from './components/role-setting.vue'
//自定义指令位置
// import { imgerror } from '@/directives/index'
//导入处理日期的函数
// import { formatDate } from '@/filters'
export default {
  components: { addEmp, roleSetting },
  name: 'yuangong',
  data () {
    return {
      showCodeDialog: false,
      showDialog: false,
      showRole: true,
      defaultImg: require('@/assets/图片/common/达1.png'),
      tableData: [],
      pageInfo: {
        page: 1,
        size: 9,
        tatol: 2
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      let res = await getEmpList(this.pageInfo)
      console.log(res)
      this.tableData = res.data.rows
      this.tableData.forEach(item => {
        item.enableState = item.enableState == 1 ? true : false
      })
      this.pageInfo.tatol = res.data.tatol
    },

    //删除点击事件
    async delEmp (id) {
      try {
        //弹出确认删除提示框
        await this.$confirm('确认要删除吗?')
        //发起请求
        await delEmp(id)
        //删除成功
        this.$message.success('删除成功!')
        //重新加载数据
        this.getList()
      } catch (error) {
        console.log(error)
      }
    },
    // 给页码加点击事件
    pageChange (page) {
      //把切换后的页码赋值给pageInfo.page
      this.pageInfo.page = page
      //然后根据最新的pageInfo去加载数据
      this.getList()
    },
    // 头像二维码点击事件
    showQrCode (url) {
      if (url) {
        this.showCodeDialog = true
        // 为true的时候还没有渲染DOM,所以就意味着里面还没有canvas标签
        // 那么所以需要等dom渲染了再来找canvas标签，并把它画成二维码
        // 用一个回调：nextTick：下次dom更新调用
        this.$nextTick(() => {
          qrCode.toCanvas(this.$refs.canvas, url)
        })
      } else {
        this.$message.warning('该员工没有图片')
      }
    }
  },
  filters: {
    formatHireType (val) {
      let list = constant.hireType.filter(item => item.id == val)
      return list[0].value
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 35px 20px;
}
img {
  border-radius: 19px;
}
</style>
